<template>
  <el-row :gutter="20" class="robot-question-dialog">
    <el-col :span="6">
      <p class="title">{{$t('configLazyLoad.robotSeven.standardQuestion')}}</p>
      <div class="question">
        <p class="name">{{$t('configLazyLoad.robotSeven.question')}}：</p>
        <div class="padding">{{current.name}}</div>
        <p class="name">{{$t('configLazyLoad.robotSeven.answer')}}：</p>
        <div v-html="current.answer" class="normal-answer"></div>
      </div>
    </el-col>
    <el-col :span="18">
      <p class="title">{{$t('configLazyLoad.robotSeven.similarQuestion')}}</p>
      <common-table :tableHead="tableHead" :data="tableData" :pagination="pagination" @operate="operate" @turnPage="search" type="selection" @selectionChange="selectionChange"></common-table>
    </el-col>
    <el-col :span="24" class="btn-wrap">
      <el-button class="primary_btn" type="danger" @click="ignore" :disabled="btnDisabled">{{$t('configLazyLoad.robotSeven.ignore')}}</el-button>
      <el-button class="primary_btn" type="info" @click="relevance" :disabled="btnDisabled" style="margin-left:50px;">{{$t('configLazyLoad.robotSeven.relation')}}</el-button>
      <el-button class="primary_btn" type="info" @click="releventOtherQuestion" :disabled="btnDisabled">{{$t('configLazyLoad.robotSeven.relatedToOther')}}</el-button>
      <el-button class="primary_btn" type="primary" @click="addQuestion" :disabled="btnDisabled">{{$t('configLazyLoad.robotSeven.newAdd')}}</el-button>
    </el-col>
    <div class="zhezhao" :class="commonDialog.isShow ? '':'hide-zhezhao'"></div>
    <el-dialog :close-on-click-modal="false" :modal="false" :modal-append-to-body="false" :title="commonDialog.title" :visible.sync="commonDialog.isShow">
      <relevant-questions
        v-if="commonDialog.type === 'relevant'"
        @saveReleventQuestion="confirmReleventQuestion"
        @close="close"
        :refresh="commonDialog.random"
        :hiddenEditName="true"
        :type="current.type"
        ></relevant-questions>
      <add-question v-else-if="commonDialog.type === 'add'" @dialogaddquestion="saveAddQuestion" @formData="formData" :oldData="oldData"></add-question>
      <webchat-box v-else-if="commonDialog.type ==='view'" :webchatContent="webchatContent"></webchat-box>
    </el-dialog>
  </el-row>
</template>
<script>
  import * as uuid from 'uuid'
  import commonTable from './CommonTable.vue'
  import addQuestion from '../AddQuestion.vue'
  import relevantQuestions from '../likeness.vue'
  import webchatBox from './WebchatBox.vue'
  import {getCacheByKey, filterXSS} from '@/utils/m7Utils'
  export default {
    name: 'questionStudy',
    data () {
      return {
        pagination: {
          currentPage: 0,
          count: 0
        },
        ids: '',
        current: {},
        webchatContent: {},
        searchObj: {
          questionId: '',
          page: 1,
          limit: 10
        },
        tableData: [],
        tableHead: [
          {prop: 'name', label: this.$t('configLazyLoad.robotSeven.mayAsk'), special: 'html'},
          {prop: 'createTime', label: this.$t('configLazyLoad.robotSeven.creatTime')},
          {prop: 'count', label: this.$t('configLazyLoad.robotSeven.askNumber')},
          {prop: 'operate', label: this.$t('configLazyLoad.robotSeven.context'), special: 'operate', operate: [{name: this.$t('configLazyLoad.robotSeven.context'), type: 'view'}]}
        ],
        btnDisabled: true,
        commonDialog: {
          title: '',
          isShow: false,
          type: '',
          random: 0
        },
        oldData: {},
        likeness: [],
        hidezhezhao: false
      }
    },
    props: {
      id: {type: String, default: ''},
      refresh: {type: Number, default: 0},
      type: {type: String, default: ''}
    },
    components: {
      commonTable,
      addQuestion,
      relevantQuestions,
      webchatBox
    },
    watch: {
      refresh: function (newV) {
        this.commonDialog.isShow = false
        this.searchObj.questionId = this.id
        this.search()
      }
    },
    methods: {
      formData (form) {
        if (this.commonDialog.type === 'add') {
          form._id = uuid.v1()
          form.questionId = this.id
          this.$store.dispatch('addStudyQuestion', form).then((rep) => {
            if (rep.success) {
              this.saveAddQuestion(false)
              this.$message(this.$t('configLazyLoad.robotSeven.addQuestionSuccess'))
              this.search()
              this.$emit('refreshList')
            } else {
              this.$message({
                message: rep.message,
                type: 'error'
              })
            }
          })
        }
      },
      confirmReleventQuestion (form) {
        let data = {questionId: this.id, likeness: this.ids, type: form.type, qId: form.qId}
        this.$store.dispatch('relevanceStudyQuestion', data).then((res) => {
          if (res.success) {
            this.commonDialog.isShow = false
            this.$message.success(this.$t('configLazyLoad.robotSeven.relationToQuestionSuccess'))
            this.search(1)
            this.$emit('refreshList')
          }
        })
      },
      closeAddQuesiton () {
        this.hidezhezhao = true
      },
      saveAddQuestion (showAdd) {
        this.commonDialog.isShow = showAdd
        this.hidezhezhao = !showAdd
      },
      ignore () {
        this.$confirm(this.$t('configLazyLoad.robotSeven.warningTip1'), this.$t('configLazyLoad.robotSeven.ignore'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('ignoreQuestion', {Query: {questionId: this.current._id, name: this.ids}})
              .then(resp => {
                if (resp.success) {
                  this.search()
                  this.$emit('refreshList')
                  this.$message({
                    type: 'success',
                    message: this.$t('configLazyLoad.robotSeven.ignoreSuccess')
                  })
                }
              })
          })
      },
      relevance () {
        this.$confirm(this.$t('configLazyLoad.robotSeven.warningTip2'), this.$t('configLazyLoad.robotSeven.relation'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('passQuestion', {Query: {questionId: this.current._id, name: this.ids}})
              .then(resp => {
                if (resp.success) {
                  this.search()
                  this.$emit('refreshList')
                  this.$message({
                    type: 'success',
                    message: this.$t('configLazyLoad.robotSeven.relationSuccess')
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: resp.message
                  })
                }
              })
          })
      },
      releventOtherQuestion () {
        this.commonDialog.random = Math.random()
        this.commonDialog.type = 'relevant'
        this.commonDialog.size = 'small'
        this.commonDialog.isShow = true
        this.commonDialog.title = this.$t('configLazyLoad.robotSeven.relatedToOther')
      },
      addQuestion () {
        this.commonDialog.type = 'add'
        this.hidezhezhao = false
        this.commonDialog.size = 'small'
        this.commonDialog.isShow = true
        this.commonDialog.title = this.$t('configLazyLoad.robotSeven.addQuestion')
        this.oldData = {
          isAdd: true,
          n: Math.random(),
          type: this.type,
          likeness: this.likeness,
          ifdisabled: true
        }
      },
      selectionChange (val) {
        this.likeness = []
        for (var i = 0; i < val.length; i++) {
          this.likeness.push(val[i].name)
        }
        if (val.length === 0) {
          this.btnDisabled = true
        } else {
          this.btnDisabled = false
        }
        let arr = []
        val.forEach((item) => {
          arr.push(item.name)
        })
        this.ids = arr
      },
      operate (event) {
        this.commonDialog.type = 'view'
        this.commonDialog.size = 'small'
        this.commonDialog.isShow = true
        this.commonDialog.title = this.$t('business.sessionContent')
        this.$store.dispatch('queryQuestionAnswerDetail', {cid: event.val.cid}).then((res) => {
          this.webchatContent = res
        })
      },
      search (page) {
        this.searchObj.page = page || 1
        this.$store.dispatch('getStudyQuestionById', this.searchObj).then((res) => {
          this.pagination.count = res.count
          this.pagination.currentPage = this.searchObj.page
          this.current = res.question || {}
          this.current.answer = filterXSS(this.current.answer)
          // type为全部时特殊处理
          let type = this.current.type || ''
          let typeObj = getCacheByKey('quesTypes', '_id', type) || ''
          if (typeObj && typeObj.pId === '') {
            this.current.type = ''
          }
          let list = this.current.likeness || []
          let arr = []
          for (let i = 0; i < list.length; i++) {
            let question = list[i]
            arr.push({cid: question.cid, operate: '1', _id: question._id, count: question.count, name: question.name, createTime: question.createTime})
          }
          this.tableData = arr
          // 没有相似问题,关闭dialog
          if (this.pagination.count === 0) {
            this.$emit('close')
          }
        })
      },
      close () {
        this.commonDialog.isShow = false
      }
    },
    beforeMount () {
      this.searchObj.questionId = this.id
      this.search()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .btn-wrap
    text-align: center
    padding-top 20px
  .title
    text-align center
    font-size 14px
    padding-bottom 15px
  .question
    background-color #f5f5f5
    padding 30px 15px
  .name
    padding-bottom 10px
  .padding
    padding-bottom: 20px
  .normal-answer
    width:100%
    overflow-wrap break-word
  .show-zhezhao
    display block
</style>
